<template>
  <div class="app">
    <div class="title">
        <input type="button" value="＜" @click="back">
        <h2>系列课程</h2>
    </div>
   
    <ul>
        <li v-for="(json,index) in dataclass" :key="index">
            <img :src="json.img" alt="">
            <p class="price">￥{{json.price}}</p>
            <p class="include">{{json.include}}</p>
            <div class="discount">特价</div>
            <div class="time">{{json.time}}</div>
        </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Class",
  data() {
    return {
        dataclass:{
        },
    };
  },
  methods: {
    back() {
      this.$router.push("/");
    },
  },
  created() {
    axios
    .get("http://localhost:3000/Class")
    .then((res) => {
      this.dataclass = res.data;
    })
  },
};
</script>

<style scoped>
@import url(./../../assets/zhy/iconfont/iconfont.css);

input {
  border: none;
  outline: none;
}
h2{
  text-align: center;
  line-height: .5rem;
  margin-bottom: .1rem;
}
.title{
    position: fixed;
    top: 0;
    width: 100%;
    height: .5rem;
    background-color: #fff;
}
.title input{
    float: left;
    margin-left: 0.2rem;
    font-size: .24rem;
    margin-top: .08rem;
    background-color: #fff;
}
ul{
    list-style:none;
    width: 3.45rem;
    margin: 0 auto;
}
ul li img{
    margin-bottom: .1rem;
}
ul li .price{
    color: #f85a19;
    margin-bottom: .1rem;
    margin-left: .1rem;
    float: left;
}
ul li .include{
    float: right;
    margin-right: .1rem;
    color: #cecece;
    font-size: .12rem;
}
ul li .discount{
    clear: both;
    background-color: #f85a19;
    margin-left: .1rem;
    float: left;
    width: .4rem;
    height: .28rem;
    line-height: .28rem;
    border-radius: .14rem 0rem 0rem .14rem  ;
    color: #fff;
    margin-bottom: .2rem;
}
ul li .time{
    float: left;
    width: 1.35rem;
    height: .26rem;
    line-height: .26rem;
    font-size: .12rem;
    border: 1px solid #f85a19;
    border-radius: 0rem .14rem .14rem 0rem  ;
}
</style>

